import React from 'react';
import '../css/Header.css';
import Company from './paging/Company';
import team from './paging/team';
import culture from './paging/culture'
import news from './paging/news'
import join from './paging/join'
import contact from './paging/contact'
import investors from './paging/investors'
import experience from './paging/experience'
import {
  HashRouter,
  Switch,
  Route,
  Link
} from 'react-router-dom'

class Header extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <HashRouter>
      <div className="header-container">
        <div className="Header">
        {/* 导航栏 */}
        <div className="Header_navigation">
          <div className="navigation">
            <a>小米商城</a>
            <span>|</span>
            <a>MIUI</a>
            <span>|</span>
            <a>loT</a>
            <span>|</span>
            <a>云服务</a>
            <span>|</span>
            <a>小艾开放平台</a>
          </div>
          <div className="navigation_r">
            <span><Link to="/login">登录</Link></span> |
            <span><Link to="/registered">注册</Link></span> |
          </div>
        </div>
        <div className="Header_header">
          <div className="header_logo">
            我是logo
          </div>
          <div className="header_nav">
            <ul>
              <li>全部商品分类</li>
              <li>全部商品分类</li>
              <li>全部商品分类</li>
              <li>全部商品分类</li>
              <li>全部商品分类</li>
            </ul>
          </div>
          <div className="header_secth">
            <input></input>
          </div>

        </div>
      </div>
        <div className="content">
            <div className="breadcrumbs">
              <div className="breadcrumbs_bty">
              <a>首页</a>
              <span>/</span>
              <a>关于小米</a>
              <span>/</span>
              <a>发展经历</a>
              </div>
            </div>
            <div className="container">
              <div className="container_nav">
                  <div className="container_nav_router">
                      <ul>
                        <li>
                        <Link to="/company">公司简介</Link>
                        </li>
                        <li>
                        <Link  to="/team">管理团队</Link>
                        </li>
                        <li>
                        <Link to="/culture">小米文化</Link>
                        </li>
                        <li>
                        <Link to="/experience">发展经历</Link>
                        </li>
                        <li>
                        <Link to="/news">小米新闻</Link>
                        </li>
                        <li>
                        <Link to="/join">加入小米</Link>
                        </li>
                        <li>
                        <Link to="/investors">投资者关系</Link>
                        </li>
                        <li>
                        <Link to="/contact">联系我们</Link>
                        </li>
                      </ul>
                  </div>
                  <div className="router_style">
                  <Switch>
                     <Route path="/company" component={Company}></Route>
                     <Route path="/team" component={team}></Route>
                     <Route path="/culture" component={culture}></Route>
                     <Route path="/experience" component={experience}></Route>
                     <Route path="/news" component={news}></Route>
                     <Route path="/join" component={join}></Route>
                     <Route path="/investors" component={investors}></Route>
                     <Route path="/contact" component={contact}></Route>
                  </Switch>
                  
                  </div>
              </div>
            </div>
        </div>
      </div>
      </HashRouter>
    )
  }
}

export default Header